
<template>
  <div class="Page_SearchStyleBox">
    <div class="Page_SearchStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_SearchStyleRightBox">
      <div class="Page_SearchStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_SearChStyleBFromBox">
        <a-breadcrumb class="Page_SearchBreadcrumb">
          <a-breadcrumb-item><a href="/home">工作台</a></a-breadcrumb-item>
          <a-breadcrumb-item><a href="/search">搜索记录</a></a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="Page_SearChStyleFromContext">
        <div class="Page_SearFromIpt">
          <p>
            <font style="fontsize: 18px">类型:</font
            ><input class="FromIpt" type="text" placeholder="请输入搜索类型" />
          </p>
          <p>
            <font style="fontsize: 18px">搜索词:</font
            ><input class="FromIpt" type="text" placeholder="请输入搜索词" />
          </p>
          <p>
            <font style="fontsize: 18px">搜索量:</font
            ><input class="FromIpt" type="text" placeholder="请输入搜索累" />
          </p>
          <p class="SearchBtn">
            <a-button type="primary">搜索</a-button>&nbsp;
            <a-button>重置</a-button>
          </p>
        </div>
        <div class="SearchBtnFrom">
          <div class="SearchFromBodyRefresh">
            <p></p>
            <p></p>
            <p><reload-outlined /></p>
          </div>
          <div class="SearchFromBodyTitle">
            <a-table
              :row-selection="rowSelection"
              :columns="columns"
              :data-source="data"
            >
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                  <a>{{ text }}s</a>
                </template>
              </template>
            </a-table>
          </div>
        </div>
        <dl class="FooterDl">
          <dt>
            <a href="https://github.com/fantasticit/wipi"
              ><img src="../../assets/b.png.png" alt=""
            /></a>
          </dt>
          <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
      
    </div>
  </div>
</template>


<script>
import Axios from "axios";
import { ref } from "vue";
import { ReloadOutlined } from "@ant-design/icons-vue";
import SearChDel from '../../ComProps/SearChDel/index.vue';
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import { message } from "ant-design-vue";
import SearChFrom from "../../ComProps/SearChFrom/index.vue";
import getCurrentTime from '../../components/getCurrentTime/index.vue';
const columns = [
  {
    title: "搜索词",
    dataIndex: "name",
  },
  {
    title: "搜索量",
    dataIndex: "age",
  },
  {
    title: "搜索时间",
    dataIndex: "address",
  },{
    title: "操作",
    dataIndex: "DelButton",
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address:<getCurrentTime></getCurrentTime>,
    DelButton:<SearChDel></SearChDel>,
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address:<getCurrentTime></getCurrentTime>,
    DelButton:<SearChDel></SearChDel>,
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address:<getCurrentTime></getCurrentTime>,
    DelButton:<SearChDel></SearChDel>,
  },
  {
    key: "4",
    name: "Disabled User",
    age: 99,
    address:<getCurrentTime></getCurrentTime>,
    DelButton:<SearChDel></SearChDel>,
  },
  
];
export default {
  data() {
    return {
     
      current: ref(2),
    };
  },
  beforeCreate() {},
  setup() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User",
        // Column configuration not to be checked
        name: record.name,
      }),
    };
    return {
      data,
      columns,
      rowSelection,
    };
  },
  created() {
    this.SearchMockFunc();
  },
  methods: {
    async SearchMockFunc() {
      let res = await Axios.get("/api/getMock");
      this.columns = res.data.data;
    },
    //确定
    confirm() {
      message.warning("访客无权进行该操作");
    },
    //取消
    cancel() {
      message.error("已经取消删除");
    },
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    ReloadOutlined,
    SearChFrom,
    getCurrentTime,
    SearChDel
  },
};
</script>

<style>
.Page_SearchStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_SearchStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  background: #001529;
  border-right: 1px solid #ccc;
}
.Page_SearchStyleRightBox {
  width: 100%;
  height: 100%;
}
.FooterDl{
  text-align: center; 
  margin-top: 20px;
}
.Page_SearchStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_SearChStyleBFromBox {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
.Page_SearchBreadcrumb {
  display: inline-block;
  margin-top: 10px;
  margin-left: 30px;
}
.SearchFromHeaderTitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fafafa;
  border-bottom: 1px solid #ccc;
}
.SearchFromHeaderTitle > p {
  width: 250px;
  height: 45px;
  line-height: 45px;
  border-right: 1px solid #ccc;
}
.Page_SearChStyleFromContext {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #eff2f5;
}
.Page_SearFromIpt {
  width: 96%;
  height: 150px;
  margin: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
}
.FromIpt {
  width: 220px;
  height: 30px;
  padding: 5px;
}
.SearchBtn {
  margin-top: 50px;
}
.SearchFromBodyRefresh {
  width: 100%;
  height: 45px;
  display: flex;
  padding: 0px 20px;
  justify-content: space-between;
}
.SearchFromBodyRefresh > p {
  margin-top: 10px;
}
#SearchOption {
  border-right: none;
}
.SearchBtnFrom {
  width: 96%;
  height: auto;
  margin: 30px;
  background: #fff;
}
.SearchFromBodyTitle {
  width: 100%;
  height: 100%;
}
</style>
